<template>
	<view class="next_content">
		<view class="top_list">
			<view class="list_content"
				:style="bg_active === index ? 'backgroundColor:#FFF6F6' : 'backgroundColor:#e3e3e3'"
				v-for="(item,index) in eight_Number" :key="index" @click="handleAlllist(item,index)">
				<view class="content_del">
					<image src="../../../static/image/icon-close.png" class="icon_close" @click.stop="handleDel(item,index)"></image>
				</view>
				<view class="content_middle">
					<view class="middle_top">
						<!-- <view class="top_text">胆码:</view> -->
						<view class="top_content">
							<view class="dra_item" v-for="item in eight_Number[index].red_drag">{{ item }}</view>
							<text style="font-size: 14px;margin-left: 5px;color: #a5a5a5;" v-show="eight_Number[index].red_drag.length > 0">(胆)</text>
						</view>
					</view>
					<view class="middle_bottom">
						<!-- <view class="bottom_text">拖码:</view> -->
						<view class="bottom_content">
							<view class="red_all_nums" v-for="item in eight_Number[index].red">{{ item }}</view>
						</view>
					</view>
				</view>
				<view class="content_multiplier">
					<view class="beilv" @click="handleAddMultiplier(item,index)">
						<view class="beilv_content">{{ item.num }}倍</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn_list">
			<view class="btn" @click="handleAdd">再加一注</view>
			<view class="btn">机选</view>
			<!-- <view class="btn">幸运号</view> -->
		</view>
		<view class="chooseWay">
			<view class="way_item" @click="handleChooseWay(item,index)"
				:class="isChooseWay === item.id ? 'isWayActive' : '' " v-for="(item , index) in way_list">
				{{ item.title }}
			</view>
		</view>
		<view class="next_top">
			<view class="next_top_left">
				<view class="left_btn" v-if="uniShow === 0" @click="handleChooseUnion">{{ unionText }}</view>
				<view class="left_change_btn" v-else @click="handleOutUnion">退出胆拖</view>
			</view>
			<view class="next_top_right">{{ text }}</view>
		</view>
		<view class="number_list">
			<view class="number_text">号码:</view>
			<view class="number_content">
				<view
					:class="{ 'isNormalball':item.selected == false, 'isBallactive':item.selected == true , 'isUnionactive': item.selected === 'union'}"
					v-for="(item,index) in number_list" @click="handleSelectBall(item,index)">
					{{ item.name }}
				</view>
			</view>
		</view>
		
		
		<view class="save" @click="handleSave">保存</view>
		<u-toast ref="uToast" />

		<u-modal :show="showMultiplier" showCancelButton @confirm="Multiplierconfirm" @cancel="showMultipliercancel"
			confirmColor="#FA254F">
			<view class="list_step">
				<view class="step_text">当前注的倍率</view>
				<view class="step_content">
					<u-number-box v-model="numberValue" button-size="40" color="#ffffff" bgColor="#FA254F"
						iconStyle="color: #fff" @change="valChange"></u-number-box>
				</view>
			</view>

		</u-modal>
		
		<u-modal
			:content="content"
			:show="showDel"
			showCancelButton
			@confirm="confirm"
			@cancel="cancel"
			confirmColor="#FA254F"
		></u-modal>
	</view>
</template>

<script>
	export default {
		props: ['parentDataEight'],
		data() {
			return {
				savesuccess:true,
				delindex:'',
				stepIndex:0,
				numberValue:1,
				showMultiplier:false,
				uniShow: 0,
				bg_active: 0,
				chooseWayNumber: 1,
				unionType: '',
				showDel:false,
				text: '单式',
				unionText: '选胆码',
				content:'是否确认删除，删除后无法恢复！谨慎操作',
				isChooseWay: 1,
				way_list: [{
						id: 1,
						title: '选择一'
					},
					{
						id: 2,
						title: '选择二'
					},
					{
						id: 3,
						title: '选择三'
					},
					{
						id: 4,
						title: '选择四'
					},
					{
						id: 5,
						title: '选择五'
					},
					{
						id: 6,
						title: '选择六'
					},
					{
						id: 7,
						title: '选择七'
					},
					{
						id: 8,
						title: '选择八'
					},
					{
						id: 9,
						title: '选择九'
					},
					{
						id: 10,
						title: '选择十'
					}
				],
				number_list: [],
				eight_Number: [{
					type:3,
					periods:'0',
					blue:[],
					blue_drag:[],
					red_drag: [],
					red: [],
					num: 1,
					model:''
				}]
			}
		},
		created() {
			for (var i = 0; i <= 79; i++) {
				this.number_list.push({
					name: this.formatNumber(i + 1),
					selected: false
				})
			}
			if(this.parentDataEight.length === 0) return
			if(this.parentDataEight[0].red.length > this.chooseWayNumber){
				this.text = '复式'
			}
			this.eight_Number = this.parentDataEight.map(item => {
				return {
					...item,
					type:3,
					model:1,
					num:1,
					periods:'0'
				}
			})
			
			this.number_list.forEach(item => {
				if(this.eight_Number[0].red.includes(item.name)){
					item.selected = true
				}
			})
			this.number_list.forEach(item => {
				if(this.eight_Number[0].red_drag.includes(item.name)){
					item.selected = 'union'
				}
			})
		},
		methods: {
			formatNumber(num) {
			    return num < 10 ? '0' + num : num.toString();
			},
			valChange(e) {
				this.numberValue = e.value
			},
			Multiplierconfirm(){
				this.showMultiplier = false
				this.eight_Number[this.stepIndex].num = this.numberValue
			},
			showMultipliercancel(){
				this.showMultiplier = false
			},
			handleAddMultiplier(item,index){
				this.showMultiplier = true
				this.stepIndex = index
			},
			handleAlllist(item1, index) {
				this.bg_active = index
				this.number_list.forEach(item => {
					item.selected = false
				})

				this.number_list.forEach(item => {
					if (item1.red_ball.includes(item.name)) {
						item.selected = true
					}
				});
			},
			handleChooseWay(item, index) {
				this.isChooseWay = item.id
				this.chooseWayNumber = item.id
			},
			handleAdd() {
				if (this.unionType === 'union' || this.eight_Number[0].red_drag.length > 0) {
					this.$refs.uToast.show({
						type: 'default',
						message: '胆码模式下只能选择一注',
					})
					return;
				}
				
				const is_add = 0;
				this.eight_Number.forEach(item => {
					if(item.red.length < 10) {
						this.$refs.uToast.show({
							type: 'default',
							message: '红球数量至少大于十个',
						})
						is_add = 1
						return
					}
					this.number_list.forEach(item => {
						item.selected = false
					})
					
				})
				if(!is_add) {
					this.eight_Number.push({
						type:3,
						periods:'0',
						blue:[],
						blue_drag:[],
						red_drag: [],
						red: [],
						num: 1,
						model:''
					})
					this.bg_active = this.eight_Number.length - 1
				}
			},
			handleSelectBall(item, index) {
				if (this.unionType === 'union') {
					item.selected = 'union'
					const index3 = this.eight_Number[this.bg_active].red_drag.indexOf(item.name)
					if (index3 !== -1) {
						item.selected = ''
						this.eight_Number[this.bg_active].red_drag.splice(index3, 1)
					} else {
						if (this.chooseWayNumber >= 2 && this.chooseWayNumber <= 10) {
							const maxSelected = this.chooseWayNumber - 1;
							if (this.eight_Number[this.bg_active].red_drag.length === maxSelected) {
								item.selected = '';
								this.$refs.uToast.show({
									type: 'default',
									message: `胆码只能选择 ${maxSelected} 个`,
								});
								item.selected = false
								return;
							}
							const index5 = this.eight_Number[this.bg_active].red.indexOf(item.name)
							if(index5 !== -1){
								this.eight_Number[this.bg_active].red.splice(index5 , 1)
							}
							this.eight_Number[this.bg_active].red_drag.push(item.name);
						}
					}
				} else {
					item.selected = !item.selected
					const index1 = this.eight_Number[this.bg_active].red.indexOf(item.name)
					if (index1 !== -1) {
						this.eight_Number[this.bg_active].red.splice(index1, 1)
						
						if(this.eight_Number[this.bg_active].red.length == this.chooseWayNumber){
							this.text = '单式'
						}
					} else {
						item.selected = true
						this.eight_Number[this.bg_active].red.push(item.name)
						if(this.eight_Number[this.bg_active].red.length < this.chooseWayNumber ){
							this.savesuccess = false
						}
						if(this.eight_Number[this.bg_active].red.length > this.chooseWayNumber) {
							this.text = '复式'
						}
					}
				}
			},
			handleChooseUnion() {
				if (this.chooseWayNumber == 1) {
					this.$refs.uToast.show({
						type: 'default',
						message: '选择为一个球时，不能进入胆拖选择',
					})
					return;
				}
				this.unionType = 'union'
				this.uniShow = 1
				this.text = '胆拖模式，点击选择胆拖'
			},
			handleOutUnion() {
				this.uniShow = 0,
				this.text = '单式',
				this.unionType = ''
			},
			handleDel(item,index){
				if(this.eight_Number.length === 1){
					this.$refs.uToast.show({
					    type:'default',
					    message:'必须要有一注',
					})
					return
				}
				this.showDel = true
				this.delindex = index
			},
			confirm(){
				this.eight_Number.splice(this.delindex,1)
				this.bg_active = this.eight_Number.length -1
				this.number_list.forEach(item => {
					item.selected = false
				})
				this.number_list.forEach(item => {
					if(this.eight_Number[this.bg_active].red.includes(item.name)){
						item.selected = true
					}
				});
				this.showDel = false
			},
			cancel(){
				this.showDel = false
			},
			handleAlllist(item1,index){
				this.bg_active = index
				this.number_list.forEach(item => {
					item.selected = false
				})
				this.number_list.forEach(item => {
					if(item1.red.includes(item.name)){
						item.selected = true
					}
				})
			},
			async handleSave(){
				if(this.savesuccess === false){
					this.$refs.uToast.show({
					    type:'default',
					    message:'选择个数必须大于红球选择个数',
					})
					return
				}
				let params = this.eight_Number
				let res = await this.$api.inheadlottery(params)
				if(res.code === 0){
					this.$refs.uToast.show({
					    type:'default',
					    message:res.msg,
					})
				} else {
					this.$refs.uToast.show({
					    type:'success',
					    message:res.msg,
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.next_content {
		width: 346px;
		margin: 0 auto;
		margin-top: 35px;
		margin-bottom: 20px;
		box-sizing: border-box;
		padding: 10px;
		background-color: $white_color;
		border-radius: $radius_eight;

		.top_list {
			width: 95%;
			height: 200px;
			margin: 0 auto;
			border-radius: $radius_four;
			box-sizing: border-box;
			overflow: auto;
			scrollbar-width: none;
			-ms-overflow-style: none;

			&::-webkit-scrollbar {
				display: none;
			}

			.list_content {
				width: 100%;
				box-sizing: border-box;
				padding: 10px;
				border-radius: $radius_eight;
				margin-bottom: 10px;
				background-color: rgb(227, 227, 227);
				display: flex;

				.content_del {
					flex: 0.15;
					@include centerAline();

					.icon_close {
						width: 30px;
						height: 30px;
					}
				}

				.content_middle {
					flex: 0.7;

					.middle_top {
						width: 100%;
						display: flex;

						.top_text {
							flex: 0.2;
							font-size: $font-size-14;
							font-weight: bold;
							@include centerAline();
						}

						.top_content {
							flex: 1;
							display: flex;
							flex-wrap: wrap;

							.dra_item {
								width: 25px;
								height: 30px;
								margin-left: 3px;
								text-align: center;
								line-height: 25px;
								font-weight: bold;
								background-image: url('../../../static/image/z_text_ball.png');
								background-size: 100% 100%;
								background-repeat: no-repeat;
								font-weight: bold;
								font-size: $font-size-12;
								color: $white_color;
							}
						}
					}

					.middle_bottom {
						width: 100%;
						display: flex;

						.bottom_text {
							flex: 0.2;
							font-size: $font-size-14;
							font-weight: bold;
							@include centerAline();
						}

						.bottom_content {
							flex: 1;
							display: flex;
							flex-wrap: wrap;

							.red_all_nums {
								width: 25px;
								height: 30px;
								background-image: url('../../../static/image/red_ball.png');
								background-size: 95% 95%;
								color: $white_color;
								text-align: center;
								line-height: $line-height-25;
								font-weight: bold;
								font-size: $font-size-12;
								margin-left: 3px;
								margin-top: 3px;
							}
						}
					}
				}

				.content_multiplier {
					flex: 0.15;
					@include centerAline();

					.beilv {
						flex: 0.1;
						@include centerAline();

						.beilv_content {
							text-align: center;
							font-weight: bold;
							background-color: $primary_color;
							color: $white_color;
							border-radius: $radius_four;
							box-sizing: border-box;
							padding: 5px;
						}
					}
				}
			}
		}

		.btn_list {
			width: 95%;
			margin: 0 auto;
			height: 60px;
			box-sizing: border-box;
			padding: 10px;
			display: flex;
			justify-content: space-around;

			.btn {
				width: 90px;
				height: 36px;
				background: linear-gradient(to right, #FF5A43, #FA2450);
				border-radius: $radius_30;
				text-align: center;
				line-height: $line-height-36;
				font-size: $font-size-14;
				color: $white_color;
			}
		}

		.chooseWay {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;

			.way_item {
				width: 18%;
				height: 30px;
				border: 1px solid red;
				margin-bottom: 10px;
				border-radius: $radius_four;
				text-align: center;
				line-height: $line-height-30;
				font-size: $font-size-14;
			}

			.isWayActive {
				color: $white_color;
				background: linear-gradient(to right, #FE5941, #F9224F);
			}
		}

		.next_top {
			width: 100%;
			height: 45px;
			display: flex;
			justify-content: center;
			align-items: center;

			.next_top_left {
				flex: 0.3;

				.left_btn {
					width: 88px;
					height: 32px;
					border: 1px solid $primary_color;
					text-align: center;
					line-height: $line-height-32;
					color: $primary_color ;
					border-radius: $radius_16;
				}

				.left_change_btn {
					width: 88px;
					height: 32px;
					border: 1px solid $primary_color;
					text-align: center;
					line-height: $line-height-32;
					color: $white_color ;
					border-radius: $radius_16;
					background: linear-gradient(to right, #FF5A43, #FA2450)
				}
			}

			.next_top_right {
				flex: 0.7;
				text-align: right;
				line-height: $line-height-32;
				font-weight: bold;
				color: $primary_color;
			}
		}

		.number_list {
			width: 100%;

			.number_text {
				width: 100%;
				height: 20px;
				margin-top: 10px;
				font-size: $font-size-14;
				font-weight: bold;
				color: $primary_color;
				line-height: $line-height-20;
			}

			.number_content {
				width: 100%;
				display: flex;
				flex-wrap: wrap;

				.isNormalball {
					width: 25px;
					height: 25px;
					border-radius: 50%;
					background-color: $qgray_color;
					border: 1px solid $gray_color;
					margin-left: 10px;
					margin-top: 10px;
					text-align: center;
					line-height: $line-height-25;
					color: $black_color;
					font-weight: bold;
					font-size: 12px;
				}

				.isBallactive {
					width: 30px;
					height: 35px;
					border-radius: 50%;
					margin-left: 10px;
					margin-top: 10px;
					text-align: center;
					line-height: 27px;
					color: $white_color;
					font-weight: bold;
					font-size: $font-size-12;
					background-image: url('../../../static/image/red_ball.png');
					background-size: 100% 100%;
				}

				.isUnionactive {
					width: 30px;
					height: 35px;
					border-radius: 50%;
					margin-left: 10px;
					margin-top: 10px;
					text-align: center;
					line-height: 27px;
					color: $white_color;
					font-weight: bold;
					font-size: $font-size-12;
					background-image: url('../../../static/image/z_text_ball.png');
					background-size: 100% 100%;
				}
			}
		}
		.save {
			width: 95%;
			height: 36px;
			margin: 0 auto;
			margin-top: 20px;
			border-radius: $radius_30;
			text-align: center;
			line-height: 36px;
			color: $white_color;
			font-size: $font-size-14;
			font-weight: bold;
			background: linear-gradient(to right, #FF5A42, #F92350)
		}
		.list_step{
			width: 300px;
			height: 200px;
			.step_text{
				width: 100%;
				height: 40px;
				box-sizing: border-box;
				padding: 10px;
				font-size: $font-size-20;
				color: $black_color;
				line-height: $line-height-40;
				font-weight: bold;
			}
			.step_content{
				width: 100%;
				height: 160px;
				@include centerAline();
			}
		}
	}
</style>